<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Standard Error</title>
</head>

<body onload="onload()">

    <h1 style="text-align:center">Compass CI active stderrs</h1>
    <hr>
    <div style="width:90%;margin:auto">
        <label>total lines : </label>
        <label id="lines">0</label>
        <br>
        <label>page size : </label>
        <input type="number" id="page_size" style="width:50px;" min="1" max="100" value=25>
        <label style="margin-left:50px;">page number : </label>
        <input type="number" id="page_num" style="width:50px;" min="1" max="1000" value=1>
        <input type="button" style="width:80px;margin-left:20px;" value="search" onclick="showData()">
        <br>
        <table id="stderrs" style="width:100%;word-break:break-all;" border="1">
            <th width=5%>count</th>
            <th width=10%>first_date</th>
            <th width=10%>suite</th>
            <th width=10%>job_owner</th>
            <th width=10%>relevant_links</th>
            <th width=55%>error_message</th>
        </table>
    </div>

</body>
<script>
    var err_data;
    function getdata() {
        var ajax = new XMLHttpRequest();
        ajax.open("post", "/active_stderr");
        ajax.send();
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                err_data = JSON.parse(ajax.responseText);
                document.getElementById('lines').innerText = err_data.total;
                showData();
            }
        }
    };

    function cleanTable() {
        var tb = document.getElementById("stderrs");
        row_length = tb.rows.length;
        if (row_length > 1) {
            for (var index = row_length - 1; index > 0; index--) {
                tb.deleteRow(index);
            }
        }
    }
    function showData() {
        if (page_num.value < 1) {
            page_num.value = 1;
        }
        if (page_size.value < 1) {
            page_size.value = 1;
        }
        var data = err_data.data;
        var start = (page_num.value - 1) * page_size.value;
        var end = page_num.value * page_size.value;
        if (start >= data.length) {
            return;
        }
        if (end > data.length) {
            end = data.length;
        }
        cleanTable();
        for (var i = start; i < end; i++) {
            var tr = document.createElement('tr');
            document.getElementById('stderrs').appendChild(tr);

            var td = document.createElement('td');
            tr.appendChild(td);
            td.style.textAlign = 'center';
            td.innerText = data[i].count;

            var td = document.createElement('td');
            td.style.textAlign = 'center';
            tr.appendChild(td);
            td.innerText = data[i].first_date;

            var td = document.createElement('td');
            td.style.textAlign = 'center';
            tr.appendChild(td);
            td.innerText = data[i].suite;

            var td = document.createElement('td');
            td.style.textAlign = 'center';
            tr.appendChild(td);
            td.innerText = data[i].job_owner;

            var td = document.createElement('td');
            td.style.textAlign = 'center';
            tr.appendChild(td);
            var a = document.createElement('a');
            td.appendChild(a);
            var s_link = data[i]['relevant_links'].split('/');
            a.innerText = s_link[s_link.length - 1];
            a.href = data[i]['relevant_links'];
            a.target = '_blank';

            var td = document.createElement('td');
            tr.appendChild(td);
            td.innerText = data[i].error_message;
        }
    };

    function onload() {
        getdata();
    };
</script>

</html>